<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
    <!-- 头部导航 -->
    <div class="bg-white/10 backdrop-blur-sm border-b border-white/20 sticky top-0 z-50">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-2xl">
              🎯
            </div>
            <div>
              <h1 class="text-xl font-bold text-white">{{ ts('政策影响分析工具') }}</h1>
              <p class="text-sm text-purple-200">{{ ts('智能政策推演与效果评估') }}</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button @click="$router.push('/scenario-login')" class="glass-button">
              {{ ts('返回首页') }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-8">
      <!-- 全局政策统计 -->
      <div class="glass-card p-6 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Database class="w-8 h-8 mr-3 text-purple-500" />
          {{ ts('全球政策数据库') }}
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="text-4xl font-bold text-purple-500 mb-2">
              <AnimatedCounter :endValue="156847" :duration="2000" />
            </div>
            <h3 class="text-white font-semibold mb-1">{{ ts('政策总数') }}</h3>
            <p class="text-white/70 text-sm">{{ ts('实时更新') }}</p>
          </div>
          
          <div class="text-center">
            <div class="text-4xl font-bold text-blue-500 mb-2">
              <AnimatedCounter :endValue="195" :duration="2000" />
            </div>
            <h3 class="text-white font-semibold mb-1">{{ ts('覆盖国家') }}</h3>
            <p class="text-white/70 text-sm">{{ ts('全球覆盖') }}</p>
          </div>
          
          <div class="text-center">
            <div class="text-4xl font-bold text-green-500 mb-2">
              <AnimatedCounter :endValue="2847" :duration="2000" />
            </div>
            <h3 class="text-white font-semibold mb-1">{{ ts('覆盖行业') }}</h3>
            <p class="text-white/70 text-sm">{{ ts('全行业覆盖') }}</p>
          </div>
          
          <div class="text-center">
            <div class="text-4xl font-bold text-yellow-500 mb-2">
              <AnimatedCounter :endValue="98" :duration="2000" />
              <span class="text-sm">%</span>
            </div>
            <h3 class="text-white font-semibold mb-1">{{ ts('准确率') }}</h3>
            <p class="text-white/70 text-sm">{{ ts('AI预测准确率') }}</p>
          </div>
        </div>
      </div>

      <!-- 新能源汽车退税政策推演 -->
      <div class="glass-card p-6 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Car class="w-8 h-8 mr-3 text-green-500" />
          {{ ts('新能源汽车退税政策影响推演') }}
        </h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="space-y-6">
            <div class="bg-white/5 rounded-lg p-6">
              <h3 class="text-xl font-bold text-white mb-4">{{ ts('政策概述') }}</h3>
              <div class="space-y-3">
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('政策名称') }}</span>
                  <span class="text-white font-semibold">{{ ts('新能源汽车购置税减免') }}</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('实施时间') }}</span>
                  <span class="text-white">{{ ts('2024年1月1日') }}</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('退税比例') }}</span>
                  <span class="text-green-400 font-semibold">{{ ts('100%免征') }}</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('适用车型') }}</span>
                  <span class="text-white">{{ ts('纯电动、插电混动') }}</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('政策期限') }}</span>
                  <span class="text-white">{{ ts('2024-2027年') }}</span>
                </div>
              </div>
            </div>
            
            <div class="bg-white/5 rounded-lg p-6">
              <h3 class="text-xl font-bold text-white mb-4">{{ ts('关键指标预测') }}</h3>
              <div class="space-y-4">
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('预计销量增长') }}</span>
                  <span class="text-green-400 font-semibold text-lg">+35%</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('年度减税规模') }}</span>
                  <span class="text-electric-500 font-semibold text-lg">1200亿元</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('新增就业') }}</span>
                  <span class="text-yellow-400 font-semibold text-lg">58万人</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-white/70">{{ ts('碳排放减少') }}</span>
                  <span class="text-purple-400 font-semibold text-lg">2800万吨</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="space-y-6">
            <div class="bg-white/5 rounded-lg p-6">
              <h3 class="text-xl font-bold text-white mb-4">{{ ts('市场影响模拟') }}</h3>
              <div class="space-y-4">
                <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-green-400 text-sm font-semibold">{{ ts('消费者层面') }}</span>
                    <span class="text-green-400 text-xs">{{ ts('正面影响') }}</span>
                  </div>
                  <div class="space-y-2 text-sm">
                    <p class="text-white/80">• {{ ts('平均每车节省购置税1.2万元') }}</p>
                    <p class="text-white/80">• {{ ts('新能源车价格竞争力提升15%') }}</p>
                    <p class="text-white/80">• {{ ts('消费者购车意愿增强') }}</p>
                  </div>
                </div>
                
                <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-blue-400 text-sm font-semibold">{{ ts('产业链层面') }}</span>
                    <span class="text-blue-400 text-xs">{{ ts('积极推动') }}</span>
                  </div>
                  <div class="space-y-2 text-sm">
                    <p class="text-white/80">• {{ ts('整车企业产能利用率提升') }}</p>
                    <p class="text-white/80">• {{ ts('电池、电机等供应链扩产') }}</p>
                    <p class="text-white/80">• {{ ts('充电基础设施需求增长') }}</p>
                  </div>
                </div>
                
                <div class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-4">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-purple-400 text-sm font-semibold">{{ ts('环境效益') }}</span>
                    <span class="text-purple-400 text-xs">{{ ts('长期收益') }}</span>
                  </div>
                  <div class="space-y-2 text-sm">
                    <p class="text-white/80">• {{ ts('加速燃油车淘汰进程') }}</p>
                    <p class="text-white/80">• {{ ts('空气质量改善') }}</p>
                    <p class="text-white/80">• {{ ts('碳中和目标推进') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 国家补贴效果分析 -->
      <div class="glass-card p-6 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <DollarSign class="w-8 h-8 mr-3 text-yellow-500" />
          {{ ts('国家补贴效果分析') }}
        </h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- 高新技术企业补贴 -->
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center">
              <Zap class="w-5 h-5 mr-2 text-yellow-500" />
              {{ ts('高新技术企业补贴') }}
            </h3>
            <div class="space-y-3">
              <div class="text-center">
                <div class="text-2xl font-bold text-yellow-500 mb-1">2.4万亿</div>
                <div class="text-white/70 text-sm">{{ ts('年度补贴规模') }}</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('受益企业') }}</span>
                  <span class="text-white">33.7万家</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('平均补贴') }}</span>
                  <span class="text-yellow-400">71.2万元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('效果评估') }}</span>
                  <span class="text-green-400">优秀</span>
                </div>
              </div>
              <div class="mt-3 pt-3 border-t border-white/20">
                <div class="text-white/70 text-xs">
                  {{ ts('推动企业研发投入增长28%，专利申请量增长42%') }}
                </div>
              </div>
            </div>
          </div>
          
          <!-- 小微企业扶持 -->
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center">
              <TrendingUp class="w-5 h-5 mr-2 text-green-500" />
              {{ ts('小微企业扶持') }}
            </h3>
            <div class="space-y-3">
              <div class="text-center">
                <div class="text-2xl font-bold text-green-500 mb-1">1.8万亿</div>
                <div class="text-white/70 text-sm">{{ ts('年度扶持规模') }}</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('受益企业') }}</span>
                  <span class="text-white">4256万户</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('平均扶持') }}</span>
                  <span class="text-green-400">4.2万元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('效果评估') }}</span>
                  <span class="text-green-400">良好</span>
                </div>
              </div>
              <div class="mt-3 pt-3 border-t border-white/20">
                <div class="text-white/70 text-xs">
                  {{ ts('小微企业生存率提升15%，新增就业岗位680万个') }}
                </div>
              </div>
            </div>
          </div>
          
          <!-- 农业现代化补贴 -->
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center">
              <Leaf class="w-5 h-5 mr-2 text-green-600" />
              {{ ts('农业现代化补贴') }}
            </h3>
            <div class="space-y-3">
              <div class="text-center">
                <div class="text-2xl font-bold text-green-600 mb-1">6800亿</div>
                <div class="text-white/70 text-sm">{{ ts('年度补贴规模') }}</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('受益农户') }}</span>
                  <span class="text-white">2.1亿户</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('平均补贴') }}</span>
                  <span class="text-green-400">3240元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('效果评估') }}</span>
                  <span class="text-green-400">显著</span>
                </div>
              </div>
              <div class="mt-3 pt-3 border-t border-white/20">
                <div class="text-white/70 text-xs">
                  {{ ts('粮食产量增长8%，农民收入增长12%') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 小切口政策案例 -->
      <div class="glass-card p-6 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Target class="w-8 h-8 mr-3 text-blue-500" />
          {{ ts('小切口政策案例分析') }}
        </h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="space-y-6">
            <!-- 案例1：外卖骑手社保 -->
            <div class="bg-white/5 rounded-lg p-6">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-white">{{ ts('外卖骑手社保试点') }}</h3>
                <span class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded text-sm">{{ ts('民生政策') }}</span>
              </div>
              
              <div class="space-y-3">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('试点城市') }}</span>
                  <span class="text-white">7个</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('覆盖骑手') }}</span>
                  <span class="text-white">85万人</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('政策投入') }}</span>
                  <span class="text-electric-500">12.5亿元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('参保率') }}</span>
                  <span class="text-green-400">78%</span>
                </div>
              </div>
              
              <div class="mt-4 pt-4 border-t border-white/20">
                <h4 class="text-white font-semibold mb-2">{{ ts('政策效果') }}</h4>
                <div class="space-y-2 text-sm">
                  <p class="text-white/80">• {{ ts('骑手职业稳定性提升23%') }}</p>
                  <p class="text-white/80">• {{ ts('工伤事故处理效率提升40%') }}</p>
                  <p class="text-white/80">• {{ ts('平台企业合规成本增加8%') }}</p>
                  <p class="text-white/80">• {{ ts('社会保障覆盖面扩大') }}</p>
                </div>
              </div>
            </div>
            
            <!-- 案例2：老旧小区改造 -->
            <div class="bg-white/5 rounded-lg p-6">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-white">{{ ts('老旧小区改造政策') }}</h3>
                <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded text-sm">{{ ts('民生改善') }}</span>
              </div>
              
              <div class="space-y-3">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('改造小区') }}</span>
                  <span class="text-white">5.9万个</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('惠及家庭') }}</span>
                  <span class="text-white">1043万户</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('投资规模') }}</span>
                  <span class="text-electric-500">1.2万亿元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('完成率') }}</span>
                  <span class="text-green-400">92%</span>
                </div>
              </div>
              
              <div class="mt-4 pt-4 border-t border-white/20">
                <h4 class="text-white font-semibold mb-2">{{ ts('政策效果') }}</h4>
                <div class="space-y-2 text-sm">
                  <p class="text-white/80">• {{ ts('居民满意度达95%') }}</p>
                  <p class="text-white/80">• {{ ts('房产增值平均12%') }}</p>
                  <p class="text-white/80">• {{ ts('新增就业岗位280万个') }}</p>
                  <p class="text-white/80">• {{ ts('带动消费增长1800亿元') }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="space-y-6">
            <!-- 案例3：校园食品安全 -->
            <div class="bg-white/5 rounded-lg p-6">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-white">{{ ts('校园食品安全监管') }}</h3>
                <span class="px-3 py-1 bg-red-500/20 text-red-300 rounded text-sm">{{ ts('安全监管') }}</span>
              </div>
              
              <div class="space-y-3">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('覆盖学校') }}</span>
                  <span class="text-white">51.5万所</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('监管师生') }}</span>
                  <span class="text-white">2.8亿人</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('政策投入') }}</span>
                  <span class="text-electric-500">280亿元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('合格率') }}</span>
                  <span class="text-green-400">99.7%</span>
                </div>
              </div>
              
              <div class="mt-4 pt-4 border-t border-white/20">
                <h4 class="text-white font-semibold mb-2">{{ ts('政策效果') }}</h4>
                <div class="space-y-2 text-sm">
                  <p class="text-white/80">• {{ ts('食品安全事件减少85%') }}</p>
                  <p class="text-white/80">• {{ ts('明厨亮灶覆盖率100%') }}</p>
                  <p class="text-white/80">• {{ ts('学生营养状况改善') }}</p>
                  <p class="text-white/80">• {{ ts('家长满意度提升至98%') }}</p>
                </div>
              </div>
            </div>
            
            <!-- 案例4：数字化便民服务 -->
            <div class="bg-white/5 rounded-lg p-6">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-white">{{ ts('数字化便民服务') }}</h3>
                <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded text-sm">{{ ts('数字治理') }}</span>
              </div>
              
              <div class="space-y-3">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('上线服务') }}</span>
                  <span class="text-white">3.2万项</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('注册用户') }}</span>
                  <span class="text-white">8.5亿人</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('政策投入') }}</span>
                  <span class="text-electric-500">450亿元</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-white/70">{{ ts('网办率') }}</span>
                  <span class="text-green-400">88%</span>
                </div>
              </div>
              
              <div class="mt-4 pt-4 border-t border-white/20">
                <h4 class="text-white font-semibold mb-2">{{ ts('政策效果') }}</h4>
                <div class="space-y-2 text-sm">
                  <p class="text-white/80">• {{ ts('办事效率提升60%') }}</p>
                  <p class="text-white/80">• {{ ts('群众跑腿次数减少70%') }}</p>
                  <p class="text-white/80">• {{ ts('行政成本节约35%') }}</p>
                  <p class="text-white/80">• {{ ts('政务服务满意度96%') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 政策推演工具 -->
      <div class="glass-card p-6">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
          <Brain class="w-8 h-8 mr-3 text-electric-500" />
          {{ ts('AI政策推演工具') }}
        </h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ ts('智能推演引擎') }}</h3>
            <div class="space-y-4">
              <div class="flex items-center justify-between">
                <span class="text-white/70">{{ ts('模型准确率') }}</span>
                <span class="text-green-400 font-semibold">98.3%</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">{{ ts('数据维度') }}</span>
                <span class="text-white font-semibold">847个</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">{{ ts('历史案例') }}</span>
                <span class="text-white font-semibold">12.5万个</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70">{{ ts('预测周期') }}</span>
                <span class="text-white font-semibold">1-10年</span>
              </div>
            </div>
            
            <div class="mt-6 pt-4 border-t border-white/20">
              <h4 class="text-white font-semibold mb-3">{{ ts('核心功能') }}</h4>
              <div class="space-y-2 text-sm">
                <p class="text-white/80">• {{ ts('政策影响量化评估') }}</p>
                <p class="text-white/80">• {{ ts('多维度效果预测') }}</p>
                <p class="text-white/80">• {{ ts('风险点识别预警') }}</p>
                <p class="text-white/80">• {{ ts('优化建议生成') }}</p>
              </div>
            </div>
          </div>
          
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-bold text-white mb-4">{{ ts('应用场景') }}</h3>
            <div class="space-y-3">
              <div class="bg-blue-500/10 border border-blue-500/20 rounded p-3">
                <h4 class="text-blue-400 font-semibold mb-1">{{ ts('政策制定前') }}</h4>
                <p class="text-white/70 text-sm">{{ ts('评估政策可行性，预测实施效果，优化政策设计') }}</p>
              </div>
              
              <div class="bg-green-500/10 border border-green-500/20 rounded p-3">
                <h4 class="text-green-400 font-semibold mb-1">{{ ts('政策实施中') }}</h4>
                <p class="text-white/70 text-sm">{{ ts('实时监控政策效果，及时调整执行策略') }}</p>
              </div>
              
              <div class="bg-purple-500/10 border border-purple-500/20 rounded p-3">
                <h4 class="text-purple-400 font-semibold mb-1">{{ ts('政策评估后') }}</h4>
                <p class="text-white/70 text-sm">{{ ts('总结政策成效，为后续政策提供参考') }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import AnimatedCounter from '../components/AnimatedCounter.vue'
import { 
  Database,
  Car,
  DollarSign,
  Target,
  Brain,
  Zap,
  TrendingUp,
  Leaf
} from 'lucide-vue-next'

export default {
  name: 'PolicySimulationDemo',
  components: {
    AnimatedCounter,
    Database,
    Car,
    DollarSign,
    Target,
    Brain,
    Zap,
    TrendingUp,
    Leaf
  },
  setup() {
    const { ts } = useTranslation()
    
    return {
      ts
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  color: white;
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.electric-500 {
  color: #06b6d4;
}
</style> 